@import (reference) 'config';
@import (reference) '../../app/less/typography';

.sessions {
  width: 460px;
  margin: auto;
  text-align: center;

  .sessions-holder {
    list-style-type: none;
    padding: 0;
    margin: 60px 0 30px 0;

    w-select,
    .input-like {
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      cursor: pointer;

      .has-name {
        display: flex;
        flex-direction: column;

        .session-address {
          .footnote-1();
          color: @color-basic-500;
          line-height: 1em;
        }
        .session-name {
          .body-2();
          line-height: 1em;
          margin: 0 0 4px 0;
        }
      }

      .icon-remove-user {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background-size: 10px 10px;
        background-position: center;
      }

      .title-content .icon-remove-user {
        display: none;
      }

      .title-content,
      .option {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .sessions {
    width: calc(100% ~'- 20px');
  }
}
